<template>
  <div class="contract-detail-container">
    <card style="margin: .2rem">
      <div class="van-hairline--bottom headTitle">
        <van-icon name="arrow-left" @click="back" />
        {{ title }}
      </div>
      <van-tabs v-model="active">
        <van-tab title="基本信息">
          <contract-detail ref="contractDetail" />
        </van-tab>
        <van-tab v-if="pageType == 1" title="编辑折扣比例">
          <contract-discount @refresh="refreshDetail" />
        </van-tab>
      </van-tabs>
    </card>
  </div>
</template>

<script>
import Card from "@/components/Card";
import { Tab, Tabs, Button, Icon } from "vant";
import ContractDetail from "./ContractDetail";
import ContractDiscount from "./ContractDiscount";
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    Card,
    ContractDetail,
    ContractDiscount
  },
  data() {
    return {
      title: "",
      pageType: 0,
      active: 0
    };
  },
  created() {
    if (this.$route.query.type == "add") {
      this.title = "添加合同";
      document.title = "添加合同";
      this.pageType = 0;
    } else {
      this.title = "合同管理";
      document.title = "合同管理";
      this.pageType = 1;
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    refreshDetail() {
      this.$refs.contractDetail.refresh();
    }
  }
};
</script>

<style lang="scss" scoped>
.contract-detail-container {
  background-image: linear-gradient(rgb(216, 231, 240), white);
  padding: 12px;
  .headTitle {
    font-size: 24px;
    padding-bottom: 12px;
    align-items: center;
    display: flex;
    .headTitleBackBtn {
      width: 40px;
      margin-right: 8px;
    }
  }
}
</style>